<template>
    <div>
        <div class="top" style="margin-bottom: 10px" v-if="goodsResult.list">
            <van-sticky :offset-top="0">
                <van-nav-bar
                    color="#bbb"
                    class="bbottom"
                    title="购物车"
                >
                    <div slot="left" @click="$router.back()"><van-icon name="arrow-left" class="lv2" size="6vw"/></div>
                    <div slot="right" @click="$router.push('/home')"><van-icon name="wap-home-o" class="lv2" size="6vw"/></div>
                </van-nav-bar>
            </van-sticky>
            <div class="tips">商品数量有限，请尽快结算</div>
        </div>
        <!--商品列表-->
        <div class="groups" v-if="goodsResult.list">
            <van-cell-group
                v-for="(item, index) in goodsResult.list"
                :key="item.group_key"
                style="margin-bottom: 10px;"
            >
                <!--发货方-->
                <van-checkbox-group v-model="goodsResult['result']" ref="checkboxegroups" @change="handleCheckedCitiesChange({res:'', checkAll: 'checkAll', list: 'list'})">
                    <van-cell clickable class="bbottom">
                        <van-checkbox slot="icon" checked-color="#fe4070" :name="item" ref="checkboxes" @click="handleCheckAllChange({parRef:'checkboxes', subRef:`sublist${index}`, child: index+1})">{{item.title}}</van-checkbox>
                    </van-cell>
                </van-checkbox-group>
                <!--商品列表-->
<!--                 :v-model="test['result'+index]""-->
                <van-checkbox-group class="bbottom" v-model="goodsResult['result'+index]" @change="handleCheckedCitiesChange({res:index, checkAll: 'checkAll'+index, list: 'list'+index})">
                    <van-cell
                        clickable
                        v-for="(good) in item.suits[0].items"
                        :key="good.item_key"
                        class="group"
                        >
                            <van-checkbox slot="icon" :name="good" checked-color="#fe4070"  :ref="`sublist${index}`"/>
                            <div class="item">
                                <div class="img"><img :src="good.image" alt=""></div>
                                <div class="des">
                                    <div class="words _style-fs14">{{good.item_short_name}}</div>
                                    <div class="words _style-fs13" v-if="!edit">{{good.attr_desc}} <span class="fr">X{{good.quantity}} </span></div>
                                    <div class="stepper _style-fs13" v-if="edit"><van-stepper button-size="20px" v-model="good.quantity" /></div>
                                    <div class="price red">{{good.item_price}} <span class="fr _style-fs14" v-if="edit"><span>删除 </span> | <span @click="edit=false"> 完成</span></span><span class="fr _style-fs12" @click="edit=true" v-if="!edit">编辑</span></div>
                                </div>
                            </div>
                    </van-cell>
                </van-checkbox-group>
                <!--tips-->
                <van-cell v-if="isShow('checkboxes', index)" :class="item.delivery_info.fee_status === 'free'?'red' : '_style-fs14'" :icon="item.delivery_info.fee_status === 'free'?'free-postage' : 'refund-o'" :title="item.delivery_info.desc"/>
            </van-cell-group>
        </div>
        <!--合计栏-->
        <div class="group cart-btn">
            <van-cell>
                <van-checkbox slot="icon" checked-color="#fe4070" name="item" ref="fa-btn" v-model="goodsResult['checkAll']"  @click="handleCheckAllChange({parRef:'fa-btn', subRef:'checkboxes'})">全选</van-checkbox>
                <div slot="title" class="summary"><span class="_style-fs14">合计</span><span class="red">￥88</span></div>
                <div slot="default"><van-button size="small" class="submit-btn" color="#fe4070" round>去结算({{getChoseAmount}})</van-button></div>
            </van-cell>
        </div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
/*为了解决axios带cookie， 需要使用此方法引入axios*/
import axios from 'axios'
axios.defaults.withCredentials=true
export default {
    name: "index",
    data() {
          return {
              list: null, // 用来渲染的数据数组
              result: [], // 选中数据
              listData: [], //真实数据大对象
              checkAll: false, // 全选
              goodsResult:{
                  list: null, // 用来渲染的数据数组
                  result: [], // 选中数据
                  checkAll: false, // 全选
              },
              edit: false // 编辑状态
          }
    },
    methods:{
        handleCheckAllChange({parRef, subRef, child=null}){ // 全选监听选中数组长度 父 传入父ref 和子ref
            var totalState = null
            if(child) { // 判断是否传了child参数 默认加了1 防止出现等于0
                child = child - 1
                if (Array.isArray(this.$refs[parRef][child])) {
                    totalState = [...this.$refs[parRef][child]].every(item => {
                        return item.checked
                    })
                } else {
                    totalState = this.$refs[parRef][child].checked
                }
            } else {
                totalState = this.$refs[parRef].checked
            }
            if (Array.isArray(this.$refs[subRef])){
                this.$refs[subRef].forEach((item) => {
                    item.toggle(!totalState)
                })
            } else {
                this.$refs[subRef].toggle(!totalState)
            }
            // this.goodsResult[result] = this.$refs[ref].checked ? this.goodsResult[list] : [];
            // this.$refs.toggleAll();
        },
        handleCheckedCitiesChange({res, checkAll, list}) { // 判断单独按钮传过来选中list是否是 子
            console.log('change')
            let checkedCount = Array.from(this.goodsResult["result" +res])
            this.goodsResult[checkAll] = checkedCount.length === this.goodsResult[list].length;
            //
            // if (this.goodsResult[checkAll]) {
            //     console.log(true)
            //     console.log(this.goodsResult["result" +res],'------------')
            //     // this.goodsResult["result" +res] = [...this.goodsResult[list]]
            // }
        },
        isShow(ref, index) {
            console.log(this.$refs[ref], index)
            return true
        } // 根据是否选中该店铺的商品显示
    },
    mounted () {
          // this.$toast('提示文案');
          this.axios.get('json/test.json')
          .then(res => {
              console.log(res.data)
              this.listData = res.data.initData
              res.data.initData.cart.groups.forEach((item, ind ) => {
                  this.$set(this.goodsResult, 'result'+ind, []) // 结果数组
                  this.$set(this.goodsResult, 'checkAll'+ind, false) // 是否全选
                  this.$set(this.goodsResult, 'list'+ind, item.suits[0].items) // 渲染数组
              })
              this.list = res.data.initData.cart.groups
              this.goodsResult.list = res.data.initData.cart.groups // 渲染数组
          })
          .catch(err => console.log(err))
    },
    computed: {
        ...mapGetters('cart', ['getChoseAmount'])
    }
}
</script>

<style scoped lang="scss">
.top{
    background-color: #ffffff;
    .van-icon{
        color: $color-v4;
    }
    .van-nav-bar__title{
        color: $color-v2;
        font-size: 16px;
        font-weight: 300;
    }
    .tips{
        padding:5px 10px;
        color: $color-v3;
    }
}
.groups{
    margin-bottom: 110px;
}
.group{
    background-color: #ffffff;
    margin-bottom: 0;
    .item{
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-column-gap: 10px;
        margin-left: 10px;
        .stepper{
            padding: 10px 0;
        }
        .img{
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}
.cart-btn{
    position: fixed;
    align-items: baseline;
    width: 100%;
    bottom: 50px;
    .summary{
        color: $color-v4;
        padding: 0 10px;
        span{
            vertical-align: middle;
        }
    }
    .submit-btn{
        padding: 0 20px;
        font-size: 14px;
    }
}
</style>
git
